<template>
	<u-popup :show="props.show" mode="center" round="30rpx">
		<view class="popup">
			<view v-if="props.title" class="title">{{ props.title }}</view>
			<view v-if="props.message" class="message">{{ props.message }}</view>
			<view class="buttons">
				<button v-if="showCancel" class="cancel" @click="onCancel">{{ cancelText }}</button>
				<button class="confirm" @click="onConfirm">{{ confirmText }}</button>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	const emits = defineEmits(['update:show', 'cancel', 'confirm']);
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '提示',
		},
		message: {
			type: String,
			default: '',
		},
		showCancel: {
			type: Boolean,
			default: true,
		},
		cancelText: {
			type: String,
			default: '取消',
		},
		confirmText: {
			type: String,
			default: '确定',
		},
	});
	const onCancel = (): void => {
		emits('update:show', false);
		emits('cancel', false);
	}
	const onConfirm = (): void => {
		onCancel();
		emits('confirm');
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 642rpx;
		background: #fff;
		border-radius: 30rpx !important;
		padding: 40rpx;
		box-sizing: border-box;
		.title {
			text-align: center;
			line-height: 32rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #242424;
			margin-bottom: 43rpx;
		}
		.message {
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #545454;
			margin-bottom: 70rpx;
		}
		.buttons {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.cancel,
			.confirm {
				flex: 1;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: 500;
				display: block;
				margin: 0;
				&::after {
					border: 0;
				}
			}
			.cancel {
				margin-right: 26rpx;
			}
			.confirm {
				color: #fff;
				background-color: $uni-color-primary;
			}
		}
	}
</style>